<template>
  <div class="header">
    
    <div class="header-title">
      <span @click="goback" class="back-btn"><DoubleLeftOutlined /></span>
      {{ baseSotre.base.name }}
    </div>

    <div class="header-tabs">
      
      <div :class="curPath == 'BaseOverview' ? 'active' : ''" @click="
        goPath('BaseOverview');
     
      ">
        基地总览
        <img v-if="curPath == 'BaseOverview'" src="@/assets/chose.png" class="chosePic" />
      </div>
      <div :class="curPath == 'DigitalPlanting' ? 'active' : ''" @click="
        goPath('DigitalPlanting');
     
      ">
        数字种植
        <img v-if="curPath == 'DigitalPlanting'" src="@/assets/chose.png" class="chosePic" />
      </div>
      <div :class="curPath == 'DigitalManagement' ? 'active' : ''" @click="
        goPath('DigitalManagement');
     
      ">
        数字管理
        <img v-if="curPath == 'DigitalManagement'" src="@/assets/chose.png" class="chosePic" />
      </div>
      <div :class="curPath == 'DigitalPlants' ? 'active' : ''" @click="
        goPath('DigitalPlants');
    
      ">
        数字植株
        <img v-if="curPath == 'DigitalPlants'" src="@/assets/chose.png" class="chosePic" />
      </div>
    </div>
    <div class="time-tab">{{ times }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore } from "@/stores/base";
import {DoubleLeftOutlined} from '@ant-design/icons-vue'
const route = useRoute();
const router = useRouter();
const baseSotre = useBaseStore()


let times = ref("");
const curPath = ref("BaseOverview");

watch(() => route.path, () => {

  curPath.value = route.name
})

const goPath = (path) => {
  
  curPath.value = path
  router.push({
    name: path,
  });
};

const goback = () => {
  // router.go(-1)

  router.push({
    // name: 'industrialPlanning'
    name: baseSotre.backName
  });
};


onMounted(() => {
  curPath.value = route.name
  setInterval(() => {
    const days = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const year = date.getFullYear().toString().padStart(4, "0");
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    const hour = date.getHours().toString().padStart(2, "0");
    const minute = date.getMinutes().toString().padStart(2, "0");
    const second = date.getSeconds().toString().padStart(2, "0");
    times.value = `${year}-${month}-${day} ${days[date.getDay()]
      } ${hour}:${minute}:${second}`;
  }, 1000);
});
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: vw(54);
  width: 100%;
  background: rgba(0, 8, 32, 0.2);


  background-image: url("@/assets/header.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;

  z-index: 8;
  position: relative;

  .header-title {
    width: 28vw;
    text-align: center;
    font-weight: 800;
    font-size: vw(24);
    color: #ffffff;
    text-shadow: vh(1) vh(1) 0px rgba(17, 20, 22, 0.22);
    position: relative;
  }

  .header-tabs {
    display: flex;
    align-self: baseline;

    >div {
      // width: vw(70);
      /* height: 18px; */
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: vw(13);
      color: #fff;
      margin: vw(10) vw(12);
      color: #bee9ff;
      cursor: pointer;
      position: relative;
    }

    .active {
      color: #fff;
      font-size: vw(16);
      margin: vh(8) vw(12);
    }
  }

  .time-tab {
    width: 26vw;
    text-align: right;
    color: #fff;

    font-weight: bold;
    font-size: vw(15);
    letter-spacing: vw(2);
    font-family: Source Han Sans CN;
  }

  .chosePic {
    width: vw(183);
    height: vw(52);
    bottom: vw(-34);
    left: vw(-60);
    position: absolute;
    pointer-events: none;
  }
}

.back-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  font-size: 30px;
}
</style>